<template>
    <div class="avue-crud__empty"
         style="display: flex; align-items: center; justify-content: center; flex-direction: column; flex: 1"
         :style="{height: calcHeight}">
        <div class="avue-empty">
            <div class="avue-empty__image" style="height: 50px;">
                <img
                        src=""
                        alt="">
            </div>
            <p class="avue-empty__desc">{{description}}</p></div>
    </div>
</template>

<script>
    export default {
        name: "empty",
        props: {
            description: {
                type: String,
                default: "暂无数据"
            },
            height: {
                type: String,
                default: "100%"
            }
        },
        computed: {
            calcHeight() {
                if (this.height !== 'auto') {
                    return `calc(${this.height} - 120px)`
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .avue-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #999;
    }
</style>
